<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>PDFJSAnnotate</title>
    {# TODO: When implementing this page, move these sources to AddInternal/AddVendor functions #}
    <link rel="stylesheet" type="text/css" href="css/pdf/toolbar.css"/>
    <link rel="stylesheet" type="text/css" href="vendor/pdfjs/pdf_viewer.css"/>
    <style type="text/css">
        body {
            background-color: #eee;
            font-family: sans-serif;
            margin: 0;
        }

        .pdfViewer .canvasWrapper {
            box-shadow: 0 0 3px #bbb;
        }
        .pdfViewer .page {
            margin-bottom: 10px;
        }

        .annotationLayer {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        #content-wrapper {
            position: absolute;
            top: 35px;
            left: 0;
            right: 250px;
            bottom: 0;
            overflow: auto;
        }

        #comment-wrapper {
            position: absolute;
            top: 35px;
            right: 0;
            bottom: 0;
            overflow: auto;
            width: 250px;
            background: #eaeaea;
            border-left: 1px solid #d0d0d0;
        }
        #comment-wrapper h4 {
            margin: 10px;
        }
        #comment-wrapper .comment-list {
            font-size: 12px;
            position: absolute;
            top: 38px;
            left: 0;
            right: 0;
            bottom: 0;
        }
        #comment-wrapper .comment-list-item {
            border-bottom: 1px solid #d0d0d0;
            padding: 10px;
        }
        #comment-wrapper .comment-list-container {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 47px;
            overflow: auto;
        }
        #comment-wrapper .comment-list-form {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 10px;
        }
        #comment-wrapper .comment-list-form input {
            padding: 5px;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="toolbar">
    <button class="cursor" type="button" title="Cursor" data-tooltype="cursor">➚</button>

    <div class="spacer"></div>

    <button class="rectangle" type="button" title="Rectangle" data-tooltype="area">&nbsp;</button>
    <button class="circle" type="button" title="Circle" data-tooltype="circle">○</button>
    <button class="circle" type="button" title="fillCircle" data-tooltype="fillcircle">◉</button>
    <button class="circle" type="button" title="emptyCircle" data-tooltype="emptycircle">⦿</button>
    <button class="arrow" type="arrow" title="Arrow" data-tooltype="arrow">➤</button>
    <div class="hotspot-color"></div>

    <button class="highlight" type="button" title="Highlight" data-tooltype="highlight">&nbsp;</button>
    <button class="strikeout" type="button" title="Strikeout" data-tooltype="strikeout">&nbsp;</button>

    <div class="spacer"></div>

    <button class="text" type="button" title="Text Tool" data-tooltype="text"></button>
    <select class="text-size"></select>
    <div class="text-color"></div>

    <div class="spacer"></div>

    <button class="pen" type="button" title="Pen Tool" data-tooltype="draw">✎</button>
    <select class="pen-size"></select>
    <div class="pen-color"></div>

    <div class="spacer"></div>

    <button class="comment" type="button" title="Comment" data-tooltype="point">🗨</button>

    <div class="spacer"></div>

    <select class="scale">
        <option value=".5">50%</option>
        <option value="1">100%</option>
        <option value="1.33">133%</option>
        <option value="1.5">150%</option>
        <option value="2">200%</option>
    </select>

    <a href="javascript://" class="rotate-ccw" title="Rotate Counter Clockwise">⟲</a>
    <a href="javascript://" class="rotate-cw" title="Rotate Clockwise">⟳</a>

    <div class="spacer"></div>

    <a href="javascript:/js/pdf" class="clear" title="Clear">×</a>
</div>
<div id="content-wrapper">
    <div id="viewer" class="pdfViewer"></div>
</div>
<div id="comment-wrapper">
    <h4>Comments</h4>
    <div class="comment-list">
        <div class="comment-list-container">
            <div class="comment-list-item">No comments</div>
        </div>
        <form class="comment-list-form" style="display:none;">
            <input type="text" placeholder="Add a Comment"/>
        </form>
    </div>
</div>
{# TODO: When implementing this page, move these sources to AddInternal/AddVendor functions #}
<script src="vendor/jquery/jquery.min.js"></script>
<script src="js/server.js"></script>
<script src="vendor/pdfjs/pdf.min.js"></script>
<script src="vendor/pdfjs/pdf_viewer.js"></script>
<script src="vendor/pdf-annotate.js/pdf-annotate.min.js"></script>
{#<script src="js/pdf-annotation/shared/initColorPicker.js"></script>#}
<script src="js/pdf/PDFAnnotate.js"></script>
</body>
</html>





